<template>
  <div style="width:100%;height:auto; margin:0 auto;">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <span class="collapse-title"> 项目情况</span>
        </template>

        <el-form ref="ruleForm" :model="form" label-width="120px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目类型">
                <el-select v-model="form.type" style="width:100%;" disabled>
                  <template>
                    <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
                  </template>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目编号">
                <el-input v-model="sortNum" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="项目名称">
                <el-input v-model="form.xiangmumingcheng" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="项目目录模型">
                <el-select v-model="form.catalogId" style="width:100%;" disabled>
                  <el-option v-for="item in mlList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否展示api">
                <el-select v-model="form.ifzs" style="width:100%;" disabled>
                  <el-option v-for="item in ynTypes" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <span class="collapse-title"> 审核记录</span>
        </template>

        <el-table ref="multipleTable" :data="cgmxData" border fit highlight-current-row height="300" style="margin-top:10px;width: 100%;">
          <el-table-column label="序号" type="index" header-align="center" align="center" width="80" />
          <el-table-column label="审批人" header-align="center" align="left" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.createuserName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审批时间" header-align="center" align="right" width="180px">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="审批结果" header-align="center" align="left" width="150">
            <template slot-scope="scope">
              <span>{{ getDicName(scope.row.result,'CDS_YEWU_STATUS') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审批意见 " header-align="center" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.opinion }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { getInfo } from '@/api/projectInfo'
import { getListByCode } from '@/api/catalogManage'
import { getDictListByCode } from '@/api/dict'

export default {
  inject: ['onLoadList'],
  props: { // 第二种方式
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeNames: ['1'],
      form: {},
      sortNum: '',
      ynTypes: [],
      xmTypes: [],
      mlList: [],
      cgmxData: [],
      statuss: []
    }
  },
  created() {
    this.getDictList('CDS_XIANGMU_TYPE')
    this.getDictList('CDS_YON')
    this.getDictList('CDS_YEWU_STATUS')
    this.getList()
  },
  methods: {
    getList() {
      getListByCode({ code: 'PROJECT_CATALOG' }).then(response => {
        this.mlList = response.data
      })
    },
    getDetailed() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getInfo({ code: this.proid }).then(response => {
        this.form = response.data.projectInfo
        this.sortNum = response.data.projectInfo.sortNum
        this.cgmxData = response.data.projectInfoRecords

        loading.close()
      }).catch(function() {
        loading.close()
      })
    },
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_XIANGMU_TYPE') {
          this.xmTypes = response.data
        }
        if (code === 'CDS_YON') {
          this.ynTypes = response.data
        }
        if (code === 'CDS_YEWU_STATUS') {
          this.statuss = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = []
      if (flag === 'CDS_XIANGMU_TYPE') {
        dict = this.xmTypes
      }
      if (flag === 'CDS_YON') {
        dict = this.ynTypes
      }
      if (flag === 'CDS_YEWU_STATUS') {
        dict = this.statuss
      }
      for (var i in dict) {
        if (dict[i].code === code) {
          return dict[i].name
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

<style lang="scss">
.collapse-title{
  font-size: 16px;
  color:#1196EE;
}
.table{
  border-collapse: separate;
  border-spacing: 10px 10px;
}
.el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA !important;
    color: #000 !important;
    cursor: not-allowed;
}
.el-textarea.is-disabled .el-textarea__inner {
    background-color: #F5F7FA;
    border-color: #dfe4ed;
    color: #000000;
    cursor: not-allowed;
}
.el-radio__input.is-disabled + span.el-radio__label {
    color: #000000;
    cursor: not-allowed;
}

</style>
